<template>
  <xn-dialog
    :custom-class="'ind-paper-report-dialog ' + (editable ? ' editable' : '')"
    :title="title"
    :visible.sync="selfVisible"
    top="5vh"
    @close="onDialogHide">
    <div class="content">
      <report-view :editable="editable" :id="id"></report-view>
    </div>
  </xn-dialog>
</template>
<script>
import ReportView from './ReportView.vue'

import XnDialog from '@com/xnDialog.vue'
export default {
  name: 'IndPaperReportDialog',
  components: {
    XnDialog,
    ReportView,
  },
  props: {
    visible: {
      type: Boolean,
    },
    editable: {
      type: Boolean,
    },
    id: {
      type: Number,
    },
    // reportId: {
    //   type: Number,
    // },
    title: {
      type: String,
      default: '履职能力整体报告',
    },
  },
  data() {
    return {
      selfVisible: false,
    }
  },
  computed: {},
  watch: {
    visible(visible) {
      this.selfVisible = visible
    },
  },
  created() {},
  mounted() {},
  methods: {
    onDialogHide() {
      this.$emit('update:visible', false)
      this.$emit('closed')
    },
  },
}
</script>
<style lang="scss" scoped>
.ind-paper-report-dialog {
  ::v-deep &.el-dialog {
    height: 89vh;
    width: 22.6cm;
    .el-dialog__body {
      padding: 10px;
    }
  }
  &.editable {
    ::v-deep &.el-dialog {
      height: 89vh;
      width: 23.5cm;
      .el-dialog__body {
        padding: 10px;
      }
    }
  }
  .content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
}
</style>
